function initCanvas() {
  fabric.Object.prototype.set({
    cornerStrokeColor: "", //激活状态角落图标的边框颜色
    borderColor: "rgb(255, 255, 255)",
    cornerColor: "rgb(255, 255, 255)",
    cornerStyle: "circle",
    minScaleLimit: 0.5, // 对象允许的最小比例值
    transparentCorners: false, //激活状态角落的图标是否透明
  });
  fabric.Object.prototype.setControlsVisibility({
    ml: false, //中左，中下，中右，中上、旋转五个点隐藏
    mb: false,
    mr: false,
    mt: false,
    mtr: false,
  });
  //限制元素放大的倍数
  fabric.Object.prototype.on("scaling", function (e) {
    // console.log(this);
    let id = this.canvas.id;
    if (id == "caption") return;

    //pip 缩放比例 0.5-满屏
    //chroma 缩放大小 20-150
    let pipScale = 272 / this.width;
    let chromaScale = 21 / this.width;

    isPipPosChange = id == "pip";
    isChromaPosChange = id == "chroma";
    isAreaMaskPosChange = id == "areaMask";

    const maxScaleX = id == "pip" ? pipScale : chromaScale;

    if (this.left < 0) {
      this.left = 0;
    }
    if (this.top < 0) {
      this.top = 0;
    }
    let width = this.width * this.scaleX;
    width = Number(width.toFixed(0));
    let height = this.height * this.scaleY;
    height = Number(height.toFixed(0));

    if (id == "areaMask") {
      let maskXScale = 272 / this.width;
      let maskYScale = 153 / this.height;
      if (!this.lastGoodscaleX) {
        this.lastGoodscaleX = this.scaleX;
      }
      if (!this.lastGoodscaleY) {
        this.lastGoodscaleY = this.scaleY;
      }
      if (!this.lastGoodLeft) {
        this.lastGoodLeft = this.left;
      }
      if (!this.lastGoodTop) {
        this.lastGoodTop = this.top;
      }
      if (
        this.left + width > this.canvas.width + 2 ||
        this.top + height > this.canvas.height + 2
      ) {
        this.scaleX = this.lastGoodscaleX;
        this.scaleY = this.lastGoodscaleY;
        this.left = this.lastGoodLeft;
        this.top = this.lastGoodTop;
      }

      if (this.scaleX > maskXScale) {
        this.scaleX = maskXScale;
        this.left = this.lastGoodLeft;
        this.top = this.lastGoodTop;
      }
      if (this.scaleY > maskYScale) {
        this.scaleY = maskYScale;
        this.left = this.lastGoodLeft;
        this.top = this.lastGoodTop;
      }

      this.lastGoodTop = this.top;
      this.lastGoodLeft = this.left;
      this.lastGoodscaleX = this.scaleX;
      this.lastGoodscaleY = this.scaleY;
      return;
    }

    if (!this.lastGoodscale) {
      this.lastGoodscale = this.scaleX;
    }
    if (!this.lastGoodLeft) {
      this.lastGoodLeft = this.left;
    }
    if (!this.lastGoodTop) {
      this.lastGoodTop = this.top;
    }
    if (
      this.left + width > this.canvas.width + 2 ||
      this.top + height > this.canvas.height + 2
    ) {
      this.scaleX = this.lastGoodscale;
      this.scaleY = this.lastGoodscale;
      this.left = this.lastGoodLeft;
      this.top = this.lastGoodTop;
    }

    if (this.scaleX > maxScaleX) {
      this.scaleX = maxScaleX;
      this.scaleY = maxScaleX;
      this.left = this.lastGoodLeft;
      this.top = this.lastGoodTop;
    }
    // if (this.scaleY > maxScaleX) {
    //   this.scaleY = maxScaleX;
    //   this.left = this.lastGoodLeft;
    //   this.top = this.lastGoodTop;
    // }

    this.lastGoodTop = this.top;
    this.lastGoodLeft = this.left;
    this.lastGoodscale = this.scaleX;
  });

  canvasPip = new fabric.Canvas("canvas-pip", {
    id: "pip",
  });
  canvasChroma = new fabric.Canvas("canvas-chroma", {
    id: "chroma",
  });
  canvasAreamask = new fabric.Canvas("canvas-areamask", {
    id: "areaMask",
  });
  // 禁止框选
  canvasPip.selection = false;
  canvasChroma.selection = false;
  canvasAreamask.selection = false;
  // 阻止对象移动到画布外面
  canvasPip.on("object:moving", (e) => {
    canvasMoving(e.target);
    isPipPosChange = true;
  });
  canvasPip.on("mouse:down", function (options) {
    fabric.Object.prototype.setControlsVisibility({
      tl: true,
      bl: true,
      tr: true,
      br: true,
      ml: false, //中左，中下，中右，中上、旋转五个点隐藏
      mb: false,
      mr: false,
      mt: false,
      mtr: false,
    });
  });
  canvasPip.on("mouse:up", function (options) {
    if (options.target && isPipPosChange) {
      // console.log(options);
      var objects = canvasPip.getObjects();
      //1080*1920
      //153*272
      //7.059
      var array = [];
      objects.forEach((element) => {
        if (element.id == "A") {
          // console.log(element);
          // console.log(element.width * element.scaleX);
          // console.log((element.left / 272.0) * 1920.0);
          array[0] = Math.round((element.left / 272.0) * 1920.0);
          // console.log(element.top);
          // console.log((element.top / 153.0) * 1080.0);
          array[1] = Math.round((element.top / 153.0) * 1080.0);
          //width 和 height 会比创建时多 1
          array[2] = Math.round(
            ((element.getBoundingRect().width - 1) / 272.0) * 1920.0
          );
          array[3] = Math.round(
            ((element.getBoundingRect().height - 1) / 153.0) * 1080.0
          );
          if (array[2] >= 1910) {
            array[2] = 1920;
          }
          if (array[3] >= 1070) {
            array[3] = 1080;
          }

          if (array[0] < -array[2] * 0.9) {
            array[0] = -array[2] * 0.9;
          }
          if (array[1] < -array[3] * 0.9) {
            array[1] = -array[3] * 0.9;
          }
        } else {
          array[4] = Math.round((element.left / 272.0) * 1920.0);
          array[5] = Math.round((element.top / 153.0) * 1080.0);
          array[6] = Math.round(
            ((element.getBoundingRect().width - 1) / 272.0) * 1920.0
          );
          array[7] = Math.round(
            ((element.getBoundingRect().height - 1) / 153.0) * 1080.0
          );
          if (array[6] >= 1910) {
            array[6] = 1920;
          }
          if (array[7] >= 1070) {
            array[7] = 1080;
          }
          if (array[4] < -array[6] * 0.9) {
            array[4] = -array[6] * 0.9;
          }
          if (array[5] < -array[7] * 0.9) {
            array[5] = -array[7] * 0.9;
          }
        }
      });
      /////////////////////////////////////
      //数据标准化处理
      if (array[0] % 2 != 0) {
        array[0]++;
      }
      if (array[4] % 2 != 0) {
        array[4]++;
      }

      if (array[2] % 16 < 8) {
        array[2] = array[2] - (array[2] % 16);
      } else if (array[2] % 16 > 8) {
        array[2] = array[2] + (16 - (array[2] % 16));
      }
      array[3] = (array[2] / 16) * 9;

      if (array[6] % 16 < 8) {
        array[6] = array[6] - (array[6] % 16);
      } else if (array[6] % 16 > 8) {
        array[6] = array[6] + (16 - (array[6] % 16));
      }
      array[7] = (array[6] / 16) * 9;
      //////////////////////////////////////
      // console.log(array);

      $("#Layer_Pos_A").text("(" + array[0] + "," + array[1] + ")");
      $("#Layer_Pos_Size_A").text("(" + array[2] + "," + array[3] + ")");

      $("#Layer_Pos_B").text("(" + array[4] + "," + array[5] + ")");
      $("#Layer_Pos_Size_B").text("(" + array[6] + "," + array[7] + ")");

      var str = "";
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        str += element + ",";
      }
      str = str.substring(0, str.length - 1);

      setTimeout(() => {
        sendArg({
          argId: Arg.Layer_Pos,
          argType: ArgType.Ba,
          argValue: str,
        });
      }, 200);

      isPipPosChange = false;
    }
    canvasPip.getObjects().forEach((e) => {
      if (e.id == selectedLayer) {
        canvasPip.setActiveObject(e);
        canvasPip.bringToFront(e);
      }
    });
  });

  canvasChroma.on("object:moving", (e) => {
    canvasMoving(e.target);
    isChromaPosChange = true;
  });
  canvasChroma.on("mouse:down", function (options) {
    fabric.Object.prototype.setControlsVisibility({
      tl: false,
      bl: false,
      tr: false,
      br: true, //中左，中下，中右，中上、旋转五个点隐藏
      mb: false,
      mr: false,
      mt: false,
      mtr: false,
    });
  });
  canvasChroma.on("mouse:up", function (options) {
    if (options.target && isChromaPosChange) {
      // console.log(options);
      var objects = canvasChroma.getObjects();
      // console.log(objects[0]);
      //1080*1920
      //153*272
      //7.059
      var array = [];
      var element = objects[0];
      array[0] = Math.round((element.left / 272.0) * 1920.0);
      if (array[0] < 0) {
        array[0] = 0;
      }
      // console.log(element.top);
      // console.log((element.top / 153.0) * 1080.0);
      array[1] = Math.round((element.top / 153.0) * 1080.0);
      if (array[1] < 0) {
        array[1] = 0;
      }
      //width 和 height 会比创建时多 1
      array[2] = Math.round(
        ((element.getBoundingRect().width - 1) / 272.0) * 1920.0
      );
      if (array[2] > 150) {
        array[2] = 150;
      }
      if (array[2] < 20) {
        array[2] = 20;
      }
      // array[3] = Math.round(
      //   ((element.getBoundingRect().height - 1) / 153.0) * 1080.0
      // );
      // console.log(array);
      var str = "";
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        str += element + ",";
      }
      str = str.substring(0, str.length - 1);
      setTimeout(() => {
        sendArg({
          argId: Arg.Chroma_Rect,
          argType: ArgType.Ba,
          argValue: str,
        });
      }, 200);

      isChromaPosChange = false;
    }
  });
  canvasAreamask.on("object:moving", (e) => {
    canvasMoving(e.target);
    isAreaMaskPosChange = true;
  });
  canvasAreamask.on("mouse:down", function (options) {
    fabric.Object.prototype.setControlsVisibility({
      tl: true,
      bl: true,
      tr: true,
      br: true,
      ml: true, //中左，中下，中右，中上、旋转五个点隐藏
      mb: true,
      mr: true,
      mt: true,
      mtr: false,
    });
  });
  canvasAreamask.on("mouse:up", function (options) {
    if (options.target && isAreaMaskPosChange) {
      var objects = canvasAreamask.getObjects();
      var array = [];
      var element = objects[0];

      array[0] = Math.round((element.left / 272.0) * 1920.0);
      array[1] = Math.round((element.top / 153.0) * 1080.0);
      //width 和 height 会比创建时多 1
      array[2] = Math.round(
        ((element.getBoundingRect().width - 1) / 272.0) * 1920.0
      );
      array[3] = Math.round(
        ((element.getBoundingRect().height - 1) / 153.0) * 1080.0
      );
      if (array[2] >= 1910) {
        array[2] = 1920;
      }
      if (array[3] >= 1070) {
        array[3] = 1080;
      }

      if (array[0] < 0) {
        array[0] = 0;
      }
      if (array[1] < 0) {
        array[1] = 0;
      }

      var str = "";
      for (let index = 0; index < array.length; index++) {
        const element = array[index];
        str += element + ",";
      }
      str = str.substring(0, str.length - 1);
      // console.log(str);
      setTimeout(() => {
        sendArg({
          argId: Arg.AreaMask_Pos,
          argType: ArgType.Ba,
          argValue: str,
        });
      }, 200);
      isAreaMaskPosChange = false;
    }
  });
}
function canvasMoving(obj) {
  let padding = 0; // 内容距离画布的空白宽度，主动设置
  // console.log(obj.id);
  let overHeight = Math.round(obj.getBoundingRect().height * 0.9);
  let overWeight = Math.round(obj.getBoundingRect().width * 0.9);
  if (obj.id == "chroma" || obj.id == "caption" || obj.id == "areamask") {
    overHeight = overWeight = 0;
  }
  if (
    obj.currentHeight > obj.canvas.height - padding * 2 ||
    obj.currentWidth > obj.canvas.width - padding * 2
  ) {
    return;
  }
  obj.setCoords();
  if (
    obj.getBoundingRect().top < padding - overHeight ||
    obj.getBoundingRect().left < padding - overWeight
  ) {
    obj.top = Math.max(
      obj.top,
      obj.top - obj.getBoundingRect().top + padding - overHeight
    );
    obj.left = Math.max(
      obj.left,
      obj.left - obj.getBoundingRect().left + padding - overWeight
    );
  }
  if (
    obj.getBoundingRect().top + obj.getBoundingRect().height >
      obj.canvas.height - padding + overHeight ||
    obj.getBoundingRect().left + obj.getBoundingRect().width >
      obj.canvas.width - padding + overWeight
  ) {
    obj.top = Math.min(
      obj.top,
      obj.canvas.height -
        obj.getBoundingRect().height +
        obj.top -
        obj.getBoundingRect().top -
        padding +
        overHeight
    );
    obj.left = Math.min(
      obj.left,
      obj.canvas.width -
        obj.getBoundingRect().width +
        obj.left -
        obj.getBoundingRect().left -
        padding +
        overWeight
    );
  }
}
